<template>
	<view class="container" @click="onPageClick">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="title">扬子晚报微信自助登报</view>
			<view class="website">read.yangtse.com</view>
			<view class="more-icon">
				<text class="iconfont">...</text>
			</view>
		</view>
		
		<!-- 蓝色标题栏 -->
		<view class="blue-header">
			<text class="blue-title">微信自助登报</text>
		</view>
		
		<!-- 步骤导航 -->
		<view class="step-nav">
			<view class="step active">
				<text class="step-num">1</text>
				<text class="step-text">选择分类</text>
			</view>
			<view class="step-line"></view>
			<view class="step">
				<text class="step-num">2</text>
				<text class="step-text">信息填写</text>
			</view>
			<view class="step-line"></view>
			<view class="step">
				<text class="step-num">3</text>
				<text class="step-text">确认支付</text>
			</view>
		</view>
		
		<!-- 公告栏 -->
		<view class="notice-section">
			<view class="notice-title">公告:</view>
			<view class="notice-content">
				<text>尊敬的用户，您好！</text>
				<text>欢迎使用扬子晚报微信自助登报系统，请选择您需要的广告类型。</text>
			</view>
		</view>
		
		<!-- 分类选择 -->
		<view class="category-section">
			<view class="section-title">分类选择</view>
			<view class="tab-container">
				<view class="tab-row">
					<view class="tab-item" :class="{ active: activeTab === 'personal' }" @click="switchTab('personal')">个人类</view>
					<view class="tab-item" :class="{ active: activeTab === 'business' }" @click="switchTab('business')">商业类</view>
					<view class="tab-item" :class="{ active: activeTab === 'other' }" @click="switchTab('other')">其他类</view>
				</view>
			</view>
			
			<!-- 详细分类 -->
			<view class="detail-category">
				<view class="category-title">详细分类</view>
				<view class="category-selector" @click.stop="toggleCategoryDropdown">
					<text class="selected-text">{{ selectedCategory ? selectedCategory.name : '请选择详细分类' }}</text>
					<text class="dropdown-icon" :class="{ 'dropdown-open': showCategoryDropdown }">▼</text>
				</view>
				<view class="dropdown-mask" v-if="showCategoryDropdown" @click.stop="showCategoryDropdown = false"></view>
				<view class="dropdown-list" v-if="showCategoryDropdown">
					<scroll-view scroll-y style="max-height: 500rpx;">
						<view class="dropdown-item" 
							v-for="(item, index) in filteredCategories" 
							:key="index" 
							@click.stop="selectCategory(item)">
							<text>{{ item.name }}</text>
							<text class="check-icon" v-if="selectedCategory && selectedCategory.id === item.id">✓</text>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<!-- 子分类 -->
			<view class="sub-category" v-if="selectedCategory && selectedCategory.subCategories && selectedCategory.subCategories.length > 0">
				<view class="category-title">子分类</view>
				<view class="sub-category-selector" @click.stop="toggleSubCategoryDropdown">
					<text class="selected-text">{{ selectedSubCategory ? selectedSubCategory.name : '请选择子分类' }}</text>
					<text class="dropdown-icon" :class="{ 'dropdown-open': showSubCategoryDropdown }">▼</text>
				</view>
				<view class="dropdown-mask" v-if="showSubCategoryDropdown" @click.stop="showSubCategoryDropdown = false"></view>
				<view class="dropdown-list" v-if="showSubCategoryDropdown">
					<scroll-view scroll-y style="max-height: 500rpx;">
						<view class="dropdown-item" 
							v-for="(item, index) in selectedCategory.subCategories" 
							:key="index" 
							@click.stop="selectSubCategory(item)">
							<text>{{ item.name }}</text>
							<text class="check-icon" v-if="selectedSubCategory && selectedSubCategory.id === item.id">✓</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<!-- 价格选项 -->
		<view class="price-options" v-if="selectedCategory">
			<view class="section-title">价格选项</view>
			<view class="price-row">
				<view class="price-item">
					<text class="item-name">正文</text>
					<text class="item-price">3元/汉字</text>
				</view>
				<view class="price-item">
					<text class="item-name">字母、数字</text>
					<text class="item-price">2元/数字、字母</text>
				</view>
			</view>
			<view class="price-row">
				<view class="price-item">
					<text class="item-name">标点符号</text>
					<text class="item-price">免费</text>
				</view>
				<view class="price-item">
					<text class="item-name">加框</text>
					<text class="item-price">30元/次</text>
				</view>
			</view>
			<view class="price-row">
				<view class="price-item">
					<text class="item-name">照片</text>
					<text class="item-price">70元/张/次</text>
				</view>
				<view class="price-item">
					<text class="item-name">段首大字</text>
					<text class="item-price">5元/字</text>
				</view>
			</view>
		</view>
		
		<!-- 价格说明 -->
		<view class="price-info" v-if="selectedCategory">
			<view class="price-info-title">分类广告价格:</view>
			<view class="price-info-content">
				<text>正文:3元/字;2元/数字、字母;</text>
				<text>标点符号免费;加框:30元/次;照片:70元/张/次(1.6CM*2CM);段首大字:5元/字。</text>
			</view>
		</view>
		
		<!-- 确认按钮 -->
		<view class="confirm-btn" v-if="selectedCategory" @click="goToForm">
			<text>确认选择</text>
		</view>
		
		<!-- 联系信息 -->
		<view class="publish-info" @click="callCustomerService">
			<view class="contact-title">客服电话:</view>
			<view class="contact-phone">13776769686</view>
		</view>
		
		<!-- 底部信息 -->
		<view class="footer">
			<view class="footer-info">
				<view class="footer-row">
					<text class="footer-label">地址:</text>
					<text class="footer-value">报社</text>
				</view>
				<view class="footer-row">
					<text class="footer-label">QQ:</text>
					<text class="footer-value blue-text">1747152853</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'personal',
				selectedCategory: null,
				selectedSubCategory: null,
				showCategoryDropdown: false,
				showSubCategoryDropdown: false,
				categories: {
					personal: [
						{
							id: 1,
							name: '个人证件',
							subCategories: [
								{ 
									id: 101, 
									name: '身份证',
									template: '遗失XXX(姓名)身份证，证号：[请填写身份证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' 
								},
								{ id: 102, name: '军官证', template: '遗失XXX(姓名)军官证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 103, name: '士官证', template: '遗失XXX(姓名)士官证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 104, name: '士兵证', template: '遗失XXX(姓名)士兵证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 105, name: '警官证', template: '遗失XXX(姓名)警官证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 106, name: '学生证', template: '遗失XXX(姓名)学生证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 107, name: '就业失业证', template: '遗失XXX(姓名)就业失业证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 108, name: '残疾证', template: '遗失XXX(姓名)残疾证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 109, name: '驾驶证', template: '遗失XXX(姓名)驾驶证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 110, name: '律师证', template: '遗失XXX(姓名)律师证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 111, name: '导游证', template: '遗失XXX(姓名)导游证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 112, name: '出生医学证明', template: '遗失XXX(姓名)出生医学证明，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 113, name: '毕业证', template: '遗失XXX(姓名)毕业证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 114, name: '工作证', template: '遗失XXX(姓名)工作证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 115, name: '护士证', template: '遗失XXX(姓名)护士证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 116, name: '医师证', template: '遗失XXX(姓名)医师证，证号：[请填写证号]，有效期：[起始日期]-[截止日期]，特此登报声明作废。' },
								{ id: 117, name: '收据', template: '遗失XXX(姓名)收据，详情：[请填写详情]，特此登报声明作废。' },
								{ id: 118, name: '发票', template: '遗失XXX(姓名)发票，详情：[请填写详情]，特此登报声明作废。' },
								{ id: 119, name: '购房合同', template: '遗失XXX(姓名)购房合同，详情：[请填写详情]，特此登报声明作废。' },
								{ id: 120, name: '其他', template: '遗失XXX(姓名)其他，详情：[请填写详情]，特此登报声明作废。' }
							]
						},
						{
							id: 2,
							name: '招聘',
							subCategories: [
								{ id: 201, name: '全职', template: '招聘XXX(岗位)全职人员，要求：[请填写要求]，联系方式：[请填写联系方式]。' },
								{ id: 202, name: '兼职', template: '招聘XXX(岗位)兼职人员，要求：[请填写要求]，联系方式：[请填写联系方式]。' },
								{ id: 203, name: '实习', template: '招聘XXX(岗位)实习生，要求：[请填写要求]，联系方式：[请填写联系方式]。' }
							]
						},
						{
							id: 3,
							name: '求职',
							subCategories: [
								{ id: 301, name: '全职', template: 'XXX(姓名)求职全职XXX(岗位)，经验：[请填写经验]，联系方式：[请填写联系方式]。' },
								{ id: 302, name: '兼职', template: 'XXX(姓名)求职兼职XXX(岗位)，经验：[请填写经验]，联系方式：[请填写联系方式]。' },
								{ id: 303, name: '实习', template: 'XXX(姓名)求职实习XXX(岗位)，经验：[请填写经验]，联系方式：[请填写联系方式]。' }
							]
						},
						{
							id: 4,
							name: '房屋出租',
							template: '出租位于[小区/地址]房屋，[几室几厅]，[面积]，租金：[请填写租金]，联系方式：[请填写联系方式]。',
							subCategories: []
						},
						{
							id: 5,
							name: '房屋求租',
							template: '求租[区域]附近房屋，要求：[请填写要求]，预算：[请填写预算]，联系方式：[请填写联系方式]。',
							subCategories: []
						}
					],
					business: [
						{
							id: 6,
							name: '公司证件',
							subCategories: [
								{ id: 601, name: '营业执照', template: '遗失XXX(公司名称)营业执照正/副本，统一社会信用代码：[请填写代码]，声明作废。' },
								{ id: 602, name: '税务登记证', template: '遗失XXX(公司名称)税务登记证正/副本，税号：[请填写税号]，声明作废。' },
								{ id: 603, name: '银行开户许可证', template: '遗失XXX(公司名称)银行开户许可证，核准号：[请填写核准号]，声明作废。' },
								{ id: 604, name: '食品经营许可证', template: '遗失XXX(公司名称)食品经营许可证正/副本，许可证编号：[请填写编号]，声明作废。' },
								{ id: 605, name: '公章', template: '遗失XXX(公司名称)公章一枚，声明作废。' },
								{ id: 606, name: '税控盘', template: '遗失XXX(公司名称)税控盘，编号：[请填写编号]，声明作废。' },
								{ id: 607, name: '发票领购簿', template: '遗失XXX(公司名称)发票领购簿，编号：[请填写编号]，声明作废。' },
								{ id: 608, name: '发票', template: '遗失XXX(公司名称)发票，发票代码：[请填写代码]，发票号码：[请填写号码]，声明作废。' },
								{ id: 609, name: '其他', template: '遗失XXX(公司名称)其他证件/物品，详情：[请填写详情]，声明作废。' }
							]
						},
						{
							id: 7,
							name: '公告声明',
							subCategories: [
								{ id: 701, name: '注销公告', template: '注销公告：XXX(公司名称)，统一社会信用代码：[请填写代码]，经股东会决议，拟向公司登记机关申请注销登记，清算组成员：[请填写成员名单]，请债权人自公告之日起45日内向本公司清算组申报债权。联系人：[姓名]，电话：[电话]。特此公告。' },
								{ id: 702, name: '减资公告', template: '减资公告：XXX(公司名称)，统一社会信用代码：[请填写代码]，经股东会决议，拟将注册资本从[原资本]万元减至[新资本]万元。请债权人自公告之日起45日内向本公司提出清偿债务或提供相应担保请求。联系人：[姓名]，电话：[电话]。特此公告。' },
								{ id: 703, name: '遗失声明', template: '遗失声明：XXX(单位/个人)不慎遗失[物品名称]，编号/证号：[请填写编号]，声明作废。' },
								{ id: 704, name: '变更公告', template: '变更公告：XXX(公司名称)原[变更前事项]变更为[变更后事项]。特此公告。' },
								{ id: 705, name: '其他', template: '公告/声明：[请填写公告或声明内容]。' }
							]
						},
						{
							id: 8,
							name: '车辆转让',
							template: '车辆转让：现有[品牌型号]车辆，颜色[颜色]，车牌号[车牌号]，行驶里程[里程]公里，现欲转让，价格面议。联系人：[姓名]，电话：[电话]。',
							subCategories: []
						}
					],
					other: [
						{ 
							id: 9, 
							name: '寻物启事', 
							template: '寻物启事：本人于[时间]在[地点]不慎遗失[物品描述]，特征：[请填写特征]。拾到者请联系[姓名]，电话：[电话]，必有重谢。',
							subCategories: [] 
						},
						{ 
							id: 10, 
							name: '其他分类', 
							template: '广告内容：[请在此处填写详细信息]。',
							subCategories: [] 
						} 
					]
				}
			}
		},
		computed: {
			filteredCategories() {
				return this.categories[this.activeTab] || [];
			}
		},
		onLoad() {
			this.initPage();
		},
		methods: {
			initPage() {
				this.activeTab = 'personal';
				this.selectedCategory = null;
				this.selectedSubCategory = null;
				this.showCategoryDropdown = false;
				this.showSubCategoryDropdown = false;
			},
			switchTab(tab) {
				this.activeTab = tab;
				this.selectedCategory = null;
				this.selectedSubCategory = null;
				this.showCategoryDropdown = false;
				this.showSubCategoryDropdown = false;
			},
			toggleCategoryDropdown() {
				this.showCategoryDropdown = !this.showCategoryDropdown;
				if (this.showCategoryDropdown) {
					this.showSubCategoryDropdown = false;
				}
			},
			selectCategory(category) {
				this.selectedCategory = category;
				this.selectedSubCategory = null;
				this.showCategoryDropdown = false;
				if (!category.subCategories || category.subCategories.length === 0) {
					this.showSubCategoryDropdown = false;
				}
			},
			toggleSubCategoryDropdown() {
				this.showSubCategoryDropdown = !this.showSubCategoryDropdown;
				this.showCategoryDropdown = false;
			},
			selectSubCategory(subCategory) {
				this.selectedSubCategory = subCategory;
				this.showSubCategoryDropdown = false;
			},
			onPageClick() {
				if (this.showCategoryDropdown) {
					this.showCategoryDropdown = false;
				}
				if (this.showSubCategoryDropdown) {
					this.showSubCategoryDropdown = false;
				}
			},
			goToForm() {
				if (!this.selectedCategory) {
					uni.showToast({ title: '请选择详细分类', icon: 'none' });
					return;
				}

				const requiresSubCategory = this.selectedCategory.subCategories && this.selectedCategory.subCategories.length > 0;

				if (requiresSubCategory && !this.selectedSubCategory) {
					uni.showToast({ title: '请选择子分类', icon: 'none' });
					return; 
				}
				
				let template = '';
				if (this.selectedSubCategory && this.selectedSubCategory.template) {
					template = this.selectedSubCategory.template;
				} else if (this.selectedCategory && this.selectedCategory.template) {
					template = this.selectedCategory.template;
				} else {
					template = '请在此处填写完整的见报内容。'; 
				}

				const categoryData = {
					category: this.selectedCategory.name,
					subCategory: this.selectedSubCategory ? this.selectedSubCategory.name : '',
					template: template
				};
				uni.navigateTo({
					url: `/pages/form/form?categoryData=${encodeURIComponent(JSON.stringify(categoryData))}`
				});
			},
			goBack() {
				uni.navigateBack();
			},
			callCustomerService() {
				uni.makePhoneCall({
					phoneNumber: '13776769686',
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
					}
				});
			}
		},
		onPageScroll() {
			if (this.showCategoryDropdown) {
				this.showCategoryDropdown = false;
			}
			if (this.showSubCategoryDropdown) {
				this.showSubCategoryDropdown = false;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 40rpx;
	}
	
	.header {
		background: linear-gradient(135deg, #2ecc71, #27ae60);
		color: #fff;
		padding: 40rpx 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		
		.back-icon, .more-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
		}
		
		.back-icon {
			display: flex;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.2);
			padding: 10rpx 20rpx;
			border-radius: 30rpx;
			margin-right: 10rpx;
			
			.iconfont {
				font-size: 36rpx;
				font-weight: bold;
			}
			
			.back-text {
				font-size: 28rpx;
				margin-left: 10rpx;
			}
			
			&:active {
				background-color: rgba(255, 255, 255, 0.3);
			}
		}
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			margin-left: 0;
		}
		
		.website {
			position: absolute;
			bottom: 10rpx;
			right: 30rpx;
			font-size: 24rpx;
			opacity: 0.8;
		}
	}
	
	.blue-header {
		background: #fff;
		padding: 30rpx;
		border-bottom: 1px solid #eee;
		
		.blue-title {
			color: #2ecc71;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	
	.step-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background: #fff;
		margin-bottom: 20rpx;
		
		.step {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.step-num {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background: #ddd;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
			
			.step-text {
				font-size: 24rpx;
				color: #999;
			}
			
			&.active {
				.step-num {
					background: #2ecc71;
					color: #fff;
				}
				.step-text {
					color: #2ecc71;
				}
			}
		}
		
		.step-line {
			flex: 1;
			height: 2rpx;
			background: #ddd;
			margin: 0 15rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.notice-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		margin: 0 20rpx 20rpx;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		
		.notice-title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: #333;
		}
		
		.notice-content {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			
			text {
				display: block;
			}
		}
	}
	
	.category-section {
		background: #fff;
		padding: 30rpx;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}
	
	.tab-container {
		margin-bottom: 30rpx;
		
		.tab-row {
			display: flex;
			border-radius: 8rpx;
			overflow: hidden;
			border: 1px solid #eee;
			
			.tab-item {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				font-size: 28rpx;
				color: #666;
				background: #f8f8f8;
				transition: all 0.3s;
				
				&.active {
					background: #2ecc71;
					color: #fff;
				}
			}
		}
	}
	
	.detail-category, .sub-category {
		margin-bottom: 30rpx;
		position: relative;
		z-index: 200;
		
		.category-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}
		
		.category-selector, .sub-category-selector {
			background: #f8f8f8;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;
			border: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.selected-text {
				font-size: 28rpx;
				color: #666;
			}
			
			.dropdown-icon {
				font-size: 24rpx;
				color: #999;
				transition: transform 0.3s;
				
				&.dropdown-open {
					transform: rotate(180deg);
				}
			}
		}
	}
	
	/* 修改z-index值，确保详细分类的z-index高于子分类 */
	.detail-category {
		z-index: 210;
	}
	
	.sub-category {
		z-index: 200;
	}
	
	.dropdown-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 199;
		background-color: transparent;
	}
	
	.dropdown-list {
		position: absolute;
		width: 100%;
		top: 100%;
		left: 0;
		margin-top: 5rpx;
		background: #fff;
		border-radius: 8rpx;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		z-index: 200;
		max-height: 500rpx;
		overflow: hidden;
		
		.dropdown-item {
			padding: 24rpx 30rpx;
			font-size: 28rpx;
			color: #666;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			&:active {
				background: #f8f8f8;
			}
			
			.check-icon {
				color: #2ecc71;
			}
		}
	}
	
	.price-options {
		background: #fff;
		padding: 30rpx;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		
		.price-row {
			display: flex;
			margin-bottom: 20rpx;
			
			.price-item {
				flex: 1;
				background: #f8f8f8;
				padding: 20rpx;
				border-radius: 8rpx;
				margin: 0 10rpx;
				text-align: center;
				
				.item-name {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.item-price {
					font-size: 24rpx;
					color: #2ecc71;
				}
			}
		}
	}
	
	.price-info {
		background: #fff;
		padding: 30rpx;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		
		.price-info-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
			color: #333;
		}
		
		.price-info-content {
			font-size: 24rpx;
			color: #666;
			line-height: 1.6;
			
			text {
				display: block;
			}
		}
	}
	
	.confirm-btn {
		margin: 40rpx 30rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #2ecc71, #27ae60);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 4px 8px rgba(46,204,113,0.2);
		
		&:active {
			opacity: 0.9;
		}
	}
	
	.publish-info {
		background: #fff;
		padding: 30rpx;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		display: flex;
		align-items: center;
		
		.contact-title {
			font-size: 28rpx;
			color: #666;
			margin-right: 20rpx;
		}
		
		.contact-phone {
			color: #2ecc71;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	
	.footer {
		padding: 30rpx;
		
		.footer-info {
			.footer-row {
				display: flex;
				margin-bottom: 10rpx;
				
				.footer-label {
					color: #999;
					font-size: 26rpx;
					margin-right: 10rpx;
				}
				
				.footer-value {
					color: #666;
					font-size: 26rpx;
					
					&.blue-text {
						color: #2ecc71;
					}
				}
			}
		}
	}
</style>
